<template>
  <section class="todoapp">
    <header class="header">
      <h1>todos</h1>
      <input
        class="new-todo"
        autofocus
        autocomplete="off"
        placeholder="What needs to be done?"
        @keydown.enter="addTodo"
      />
    </header>
    <section class="main">
      <input
        id="toggle-all"
        class="toggle-all"
        type="checkbox"
        @change="changeAllChecked(!isAllDone)"
        :checked="isAllDone"
      />
      <label for="toggle-all">Mark all as complete</label>
      <ul class="todo-list">
        <!-- :class="{ completed: item.done }" -->
        <li
          class="todo"
          :class="{ completed: item.done }"
          v-for="(item, index) in filterTodoList"
          :key="item.id"
        >
          <div @dblclick="changeIsEdit(item)" v-show="!item.isEdit">
            <input
              class="toggle"
              type="checkbox"
              @change="changeTodoStatus(index, $event)"
              :checked="item.done"
            />
            <label>{{ item.text }}</label>
            <button class="destroy" @click="delTodo(index)"></button>
          </div>
          <input
            class="edit"
            type="text"
            :value="item.text"
            v-show="item.isEdit"
            @keyup.enter="endEdit(item, $event.target.value)"
            @blur="endEdit(item, $event.target.value)"
          />
        </li>
      </ul>
    </section>
    <footer class="footer">
      <span class="todo-count">
        <strong></strong> {{ unDoneNumber }} item left
      </span>
      <ul class="filters">
        <li>
          <a
            href=""
            :class="{ selected: visibility == 'all' }"
            @click.prevent="changeVisibility('all')"
            >All</a
          >
        </li>
        <li>
          <a
            href=""
            :class="{ selected: visibility == 'active' }"
            @click.prevent="changeVisibility('active')"
            >Active</a
          >
        </li>
        <li>
          <!-- :class="{ selected: visibility == 'Completed'} -->
          <a
            href=""
            :class="{ selected: visibility == 'completed' }"
            @click.prevent="changeVisibility('completed')"
            >Completed</a
          >
        </li>
      </ul>
      <button
        class="clear-completed"
        @click="delAllDone"
        v-show="todoList.length > unDoneNumber"
      >
        Clear completed
      </button>
    </footer>
  </section>
</template>

<script setup>
import { ref, reactive, computed, watch } from "vue";
import useLocalStoage from "../../../hooks/useLocalStoage";

// vue的核心：操作数据，数据驱动视图
// 数据是响应式的，操作数据相当于操作页面
// let todoList = reactive([
//   {
//     id: "01",
//     text: "学习vue3",
//     done: true,
//     isEdit: false,
//   },
//   {
//     id: "02",
//     text: "学习react",
//     done: false,
//     isEdit: false,
//   },
// ]);
let todoListDate = useLocalStoage("todoList").value || [];
let todoList = reactive(todoListDate);

let visibility = ref("all");

// 判断所有的todo是否都已完成
let isAllDone = computed(() => {
  return todoList.every((item) => item.done == true);
});

// 统计没有完成的todo的个数
let unDoneNumber = computed(() => {
  return todoList.filter((item) => item.done === false).length;
});

// 根据todolist 和 visibility 得到一个新的todolist
let filterTodoList = computed(() => {
  if (visibility.value === "all") {
    return todoList;
  } else if (visibility.value === "active") {
    return todoList.filter((item) => item.done === false);
  } else {
    return todoList.filter((item) => item.done === true);
  }
});

// 删除todo
let delTodo = (index) => {
  // 数组中有7个方法，可以影响原数组，这7个方法是有响应式的
  // push pop shift unshift splice sort reverse
  todoList.splice(index, 1);
};

// 改变单个todo的状态
let changeTodoStatus = (index, e) => {
  // console.log(e.target.checked);
  todoList[index].done = e.target.checked;
};

// 全选与全不选
let changeAllChecked = (flag) => {
  todoList.forEach((item) => {
    item.done = flag;
  });
};

// 双击改变是否处于编辑状态
let changeIsEdit = (item) => {
  item.isEdit = true;
};

// 结束编辑
let endEdit = (item, newText) => {
  item.isEdit = false;
  item.text = newText.trim();
};

// 添加todo
let addTodo = (e) => {
  let newText = e.target.value;
  if (!newText.trim()) {
    alert("添加的todo不能为空~");
    return;
  }
  todoList.push({
    id: Date.now(),
    text: newText,
    done: false,
    isEdit: false,
  });
  e.target.value = "";
};

// 改变visibility
let changeVisibility = (flag) => {
  visibility.value = flag;
};

// 删除已完成的
let delAllDone = () => {
  let res = todoList.filter((item) => item.done === false);
  // todoList = res;

  // todoList.length = 0;
  // res.forEach((item) => {
  //   todoList.push(item);
  // });

  todoList.length = 0;
  todoList.push(...res);
};

// 监听todolist
watch(todoList, (newTodoList) => {
  useLocalStoage("todoList", newTodoList);
});
</script>

<style lang="scss" scoped>
</style>